<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="<% HTTP_ROOT %>/bootstrap/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="<% HTTP_ROOT %>/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="<% HTTP_ROOT %>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<% HTTP_ROOT %>/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            padding: 20px;
        }

        .headLeft {
            float: left;
        }

        .headRight {
            padding-top: 40px;
            padding-left: 340px;
        }

        .search {
            margin-bottom: 10px;
        }

        .search .toolbar {
        }
        .mag{
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-fixed-top navbar-default" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand " href="#">后台管理系统</a>
                    </div>
                    <div class="navbar-right">
                        <a class="navbar-brand" href="#">当前用户：<%= username %></a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="row" style="padding-top:30px;">
        <div class="col-md-3">
            <div class="list-group">
                <%for(let type in page_types){%>
                <a href="<%=HTTP_ROOT%>/admin/<%=type%>" class="list-group-item <%if(type== page_type){%>active<%}%>">
                    <%=page_types[type]%></a>
                <% }%>
            </div>
        </div>
        <div class="col-md-9">
            <div>
                <ol class="breadcrumb">
                    <li><span class="glyphicon glyphicon-home"></span>&nbsp;<a href="#">主页</a></li>
                    <li class="active"><%=page_type%></li>
                </ol>
            </div>
            <button class="btn btn-primary btn-add" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
                <i class="glyphicon glyphicon-plus mag"></i>
                添加
            </button>
            <div style="background: #f4f4f4;margin-top: 10px;text-align: center;overflow: auto">
                <table data-toggle="table" class="table table-hover table-bordered">
                    <thead style="text-align: center">
                    <tr>
                        <th style="text-align: center">ID</th>
                        <%fields.forEach(field =>{%>
                        <th style="text-align: center"><%=field.title%></th>
                        <%})%>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <% datas.forEach(item =>{ %>
                    <tr>
                        <td><%= item.ID %></td>
                        <%fields.forEach(field =>{%>
                        <th style="text-align: center"><%=item[field.name]%></th>
                        <%})%>
                        <td>
                            <a href="#" class="btn btn-primary btn-sm btn-modify" data-toggle="modal" data-target="#exampleModal" data-id="<%=item.ID%>"
                            ><i class="glyphicon glyphicon-pencil mag">
                                </i>编辑</a>
                            <a href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=item.ID%>" class="btn btn-danger btn-sm"
                               onclick="return confirm('确认删除')"
                            ><i class="glyphicon glyphicon-trash mag"></i>删除</a>
                        </td>
                    </tr>
                    <% }) %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--弹出框-->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form" action="<%=HTTP_ROOT%>/admin/<%=page_type%>" method="post" enctype="multipart/form-data">
                        <%fields.forEach(field =>{%>
                        <div class="form-group modify-input">
                            <label class="control-label col-sm-2"><%=field.title%>:</label>
                            <%if(field.type == 'textarea'){%>
                            <textarea class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>" id="" cols="20" rows="10"></textarea>
                            <%}else if(field.type == 'select'){%>
                            <select name="<%=field.name%>" class="form-control">
                                <%field.select.forEach(item=>{%>
                                <option value="<%=item.ID%>"><%=item.title%></option>
                                <%})%>
                            </select>
                            <%}else {%>
                            <input type="<%=field.type%>" class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>">
                            <%}%>
                        </div>
                        <% }) %>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Send message</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div align="center" style="padding-top: 200px">
                Copyright © 2017-2018 larger5
            </div>
        </div>
    </div>
</div>
<script>
    const HTTP_ROOT = `<%=HTTP_ROOT%>`;
    const page_type = `<%=page_type%>`;
</script>
<script>
        $(".list-group-item").on("click", function () {
            $(".list-group-item").removeClass("active");
            $(this).addClass("active")
        })
        function famateDate(n) {
            return n>10 ? n : '0'+n
        }
        $('.btn-modify').click(async function () {
            let id = this.dataset.id;
            let url = `${HTTP_ROOT}/admin/${page_type}/get/${id}`
            let data=await $.ajax({
                url,
                dataType: 'json',
            })
            if(data.err){
                alert('no data')
            }else{
                let old_data = data.data;
                $('.modal-title').html('编辑');
                $('.modal-body form').attr('action',`${HTTP_ROOT}/admin/${page_type}/modify/${id}`);
                $('.modify-input input,.modify-input textarea').each(function(){
                    if(old_data[this.name] !== undefined){
                        try{
                            if(this.type == 'date'){
                                let oDate = new Date(old_data[this.name]*1000)
                                this.value = `${oDate.getFullYear()}-${famateDate(oDate.getMonth()+1)}-${famateDate(oDate.getDate())}`
                            }else{
                                this.value = old_data[this.name]
                            }
                        }catch (e){}
                    }
                })
            }
        });
        $('.btn-add').click(()=>{
            $('.modal-title').html('添加');
        })
</script>
</body>
</html>